<template>
  <BasicModal
    width="1200px"
    v-bind="$attrs"
    @ok="handleSubmint"
    :minHeight="300"
    okText="确认"
    @register="register"
    :title="modalTitle" >
    <div class="container">
      <BasicForm @register="registerForm">
        <template #slotBtns class="page-form-slotbtn">
          <div class="btn-box">
            <a-button class="btn-box-item" style="margin-left: 10px"  type="primary" @click="handleDownLoad">导出</a-button >
            
          </div>
        </template>
    </BasicForm>
    <BasicTable
       v-loading="loading"
        @register="registerTable"
        :columns="columns"
        :dataSource="tableData"
        :canResize="false"
        :clickToRowSelect="false"
        :showIndexColumn="true"
        :striped="true"
        :bordered="true"
        :pagination="false"
        rowKey="code"
      >
         <template #bodyCell="{ column, record }">
              <!-- 写入质量值NG红色OK绿色 -->
                <template v-if="column.key === 'WriteQuality'">
                  <span :class="record[column.key] === 'NG'?'red':'green'">
                    {{ record[column.key] }}
                  </span>
              </template>
              <!-- 写入后读取值跟写入值一致是蓝色，否则灰色 -->
              <template v-if="column.key === 'ReadValue'">
                  <span :class="record[column.key] == record['WriteValue'] ?'blue':''">
                    {{ record[column.key] }}
                  </span>
              </template>
              <template v-if="column.key === 'ReadTimeStamp'">
                  <span class="blue">
                    {{ record[column.key] }}
                  </span>
              </template>
          </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { getdownloaddetails,handledownLoad} from '/@/api/equipmentControl/index';
  import { downloadByData, getFileHash } from '/@/utils/file/download';

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  const modalTitle = ('参数下发明细');
  let tableData = reactive([]);
  let loading = ref(false);
  watch(
    () => props.info.data,
    () => {
      nextTick(async () => {
        let { AssetCode, DeviceName, ModelName, TypeName, Id} = props.info.data;
        setFieldsValue({ AssetCode, DeviceName, TypeName,ModelName});
        getTable(Id)
      });
      // formInfo = props.info.data
    },
    { deep: true },
  );
  const { createMessage } = useMessage();
  const { t } = useI18n();
  const emit = defineEmits(['submitSuccess']);
  const [register] = useModal();
  // 表单内容
  const schemas: FormSchema[] = [
      {
        field: 'AssetCode',
        component: 'Input',
        label: '设备编码',
        componentProps: {
          disabled: true,
        },
        colProps: {
          span: 5,
        },
      },
      {
        field: 'DeviceName',
        component: 'Input',
        label: '设备名称',
        componentProps: {
          disabled: true,
        },
        colProps: {
          span: 5,
        },
      },
      {
        field: 'ModelName',
        component: 'Input',
        label: '设备型号',
        componentProps: {
          disabled: true,
        },
        colProps: {
          span: 5,
        },
      },
      {
        field: 'TypeName',
        component: 'Input',
        label: '设备类型',
        componentProps: {
          disabled: true,
        },
        colProps: {
          span: 5,
        },
      },
      {
        field: 'btns',
        component: 'Input',
        label: '',
        slot: 'slotBtns',
        colProps: {
          span: 4,
        },
      },
    ];
  // 表格表头
  let columns: BasicColumn[] = [
    {
      title: '变量',
      dataIndex: 'Name',
    },
    {
      title: '数量类型',
      dataIndex: 'DataType',
    },
    {
      title: '当前值',
      dataIndex: 'Value',
      width: 100,
    },
    {
      title: '写入值',
      dataIndex: 'WriteValue',
    },
    {
      title: '写入质量数',
      dataIndex: 'WriteQuality',
    },
    {
      title: '下发时间戳',
      dataIndex: 'WriteTimeStamp',
      width: 180,
    },
    {
      title: '写入后读取值',
      dataIndex: 'ReadValue',
    },
    {
      title: '时间戳',
      dataIndex: 'ReadTimeStamp',
      width: 180,
    },
    {
      title: '单位',
      dataIndex: 'Unit',
    },
    
    {
      title: '描述',
      dataIndex: 'Description',
    },
  ];
  const [registerForm, {setFieldsValue,getFieldsValue }] = useForm({
      labelWidth: 100,
      schemas: schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
  
  const [registerTable, { getSelectRowKeys, clearSelectedRowKeys }] = useTable();
  
  async function getTable (id) {
    try {
        loading.value = true;
        let res = await getdownloaddetails([id]);
        tableData = res
        loading.value = false;
      } catch (error) {
        loading.value = false;
      }
  }
  //导出参数
  async function handleDownLoad() {
    if(tableData.length === 0){
      createMessage.warning(t('请先读取参数！'));
      return;
    }
    const { AssetCode, ModelCode, ModelName, TypeCode, TypeName, DeviceName } =
      await getFieldsValue();
    let params = {
      AssetCode: AssetCode, //设备编码
      DeviceName: DeviceName, //设备名称
      ModelCode: ModelCode, //型号编码
      ModelName: ModelName, //型号名称
      TypeCode: TypeCode, //类型编码
      TypeName: TypeName, //类型名称
      DownloadTags: tableData, //下发列表
    };
    let res = await handledownLoad([params]);
    const blob = new Blob([res.data], { type: 'application/octet-stream' });
    let hash = await getFileHash(blob);
    let resHash = res.headers['FileSHA'] || res.headers['filesha'] || '';

    if (hash === resHash) {
      downloadByData(res.data, '设备参数.xlsx');
    } else {
      createMessage.warning('文件数据缺失，请重新下载');
    }
  }

  async function handleSubmint() {
    
    emit('submitSuccess');
  }
 
</script>

<style lang="less" scoped>
 .border-btm{
  border-bottom: 1px solid #C0C4CC;
  margin-bottom: 20px
 }
 .container-title{
  font-size: 14px;
  font-weight: 700;
  position: relative;
  padding-left: 8px
 }
 .container-title:before {
  content: "";
  background-color: #3796EC;
  width: 3px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
}

 .container-group{
  margin-top: 25px;
 }
 .check-item{
  min-width: 100px;
  // border: 1px solid;
  margin-bottom: 15px;
 }
 .red{
    color: red
  }
  .green{
    color: green;
  }
  
  .blue{
    color: aqua
  }
</style>
